<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../utils/flexible.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/brandTitle.css">
</head>

<body>
    <div class="header" id="top">
        <img src="../assets/imgs/header_logo.png" alt="">
        <img src="../assets/imgs/header_app.png" alt="">
    </div>
    <div class="searchbox">
        <input type="text" placeholder="请输入你想比价的产品">
        <button>搜索</button>
    </div>

    <div class="nav">
        <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
    </div>

    <div class="divP">
        <p>热门品牌排行</p>
    </div>

    <div class="container">
        <ul>
            <li>
                <p>平板电视十大品牌 <i>▼</i></p>
                <ul>
                    <li>
                        <div><span>0</span> 三星液晶电视</div>
                        <p>30天全网销售：11111件</p>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <p>平板电视十大品牌 <i>▼</i></p>
                <ul>
                    <li>
                        <div><span>0</span> 三星液晶电视</div>
                        <p>30天全网销售：11111件</p>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <p>平板电视十大品牌 <i>▼</i></p>
                <ul>
                    <li>
                        <div><span>0</span> 三星液晶电视</div>
                        <p>30天全网销售：11111件</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="footer">
        <div class="more">
            <a>更多优惠信息>></a>
        </div>
        <div class="chart">
            <span>品牌排行</span>
        </div>
        <ul>
            <li>登入</li>
            <li>注册</li>
            <li><a href="#top">返回顶部</a></li>
        </ul>
        <p>手机APP下载 慢慢买手机版 -- 掌上比价平台</p>
        <p>m.manmanbuy.com</p>
    </div>



    <script>
        let that;
        $.ajax({
            url: "http://chst.vip:1234/api/getbrandtitle"
        }).then(res => {
            creatUl(res.result);
            $(".container>ul").on("click", "li", clickUlHandler);
        })

        function clickUlHandler(e) {
            let brandtitleid = $(this).attr("brandTitleid");
            $.ajax({
                url: `http://chst.vip:1234/api/getbrand`,
                data: {
                    brandtitleid
                }
            }).then(res => {
                creatData(res.result,$(this));
            })
        }

        function clickDataHandler(e) {
            console.log(this);
            e.preventDefault();
            e.stopPropagation();
        }

        function creatData(data,El) {
            let html = "";
            // _id: "580ddb976b7bf3ad69711a0f"
            // brandId: 0
            // brandTitleId: 0
            // brandName: "三星平板电视"
            // brandInfo: "30天全网销售：242408件"
            // categoryId: 0
            data.forEach((item,index)=>{
                html += `
                    <li brandtitleid="${item.brandTitleId}">
                        <div><span>${index}</span> ${item.brandName}</div>
                        <p>${item.brandInfo}</p>
                    </li>
                `;
            });
            $(this).find("ul").on("click","li",clickDataHandler);  
            if(!that){
                El.find("ul").html(html).hide().show(500);
                that = El;
                console.log('初始化',that,El);
                return;
            }
            if(that.attr("brandTitleid")!=El.attr("brandTitleid")){
                El.find("ul").html(html).stop().hide().show(500);
               console.log('两次点击不一样',that,El);
                that.find("ul").html(html).slideToggle(500);
            }else{
                console.log('你点了同一个',that,El);
                El.find("ul").html(html).stop().slideToggle(500);   
            }
            that = El;
           
        }

        function creatUl(data) {
            let html = "";
            // _id: "580dc33a6b7bf3ad697110e7"
            // brandTitleId: 0
            // brandTitle: "平板电视十大品牌"
            // categoryId: 0
            data.forEach((item, index) => {
                html += `
                    <li brandTitleid="${item.brandTitleId}" categoryId="${item.categoryId}">
                        <p> ${item.brandTitle} <i>▼</i></p>
                        <ul>
                            
                        </ul>
                    </li>
                `;
            });
            $(".container ul").html(html);
        }
    </script>
</body>

</html>